<template>
  <BreadcrumbBar
    parent-label="AI Service Management"
    child-label="Ai Picture Comparison"
  ></BreadcrumbBar>

  <div style="width: 100%; height: 50px; display: flex">
    <el-button
      style="height: 100%"
      v-once-click
      color="#626aef"
      plain
      :icon="Search"
      @click="clickHandler"
    >
      识别区别
    </el-button>

    <el-button
      style="height: 100%"
      v-once-click
      color="#626aef"
      plain
      :icon="Search"
      @click="clickHandler2"
    >
      标记区别
    </el-button>
  </div>

  <br />

  <div>
    <canvas
      ref="canvasRef"
      :width="canvasWidth"
      :height="canvasHeight"
    ></canvas>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

import BreadcrumbBar from '@/components/BreadcrumbBar/BreadcrumbBar.vue'

// 配置项
const instance = axios.create({
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
  timeout: 15000,
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    config.headers.Authorization = 'Bearer sk-d70d3e41fb3943a485b6f8cf877b722f'

    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

const clickHandler = () => {
  const messages = [
    {
      role: 'user',
      content: [
        {
          type: 'image_url',
          image_url: {
            url: 'http://115.190.202.175/resourcePool/public/1980852435281272833/96125efa-7bf3-4684-979c-6e0232c216b6.jpg',
          },
        },
        {
          type: 'image_url',
          image_url: {
            url: 'http://115.190.202.175/resourcePool/public/1980852435281272833/773ff2a0-28c2-4804-9166-fc39c1c01d16.jpg',
          },
        },
        {
          type: 'text',
          text: `仔细对比两张图片，告诉我两张图片的区别在哪里。不需要返回其他的`,
        },
      ],
    },
  ]

  instance
    .post('', { model: 'qwen3-vl-flash', messages: messages })
    .then((res: any) => {
      console.log(res)
    })
}

const clickHandler2 = () => {
  const messages = [
    {
      role: 'user',
      content: [
        {
          type: 'image_url',
          image_url: {
            url: 'http://115.190.202.175/resourcePool/public/1980852435281272833/96125efa-7bf3-4684-979c-6e0232c216b6.jpg',
          },
        },
        {
          type: 'image_url',
          image_url: {
            url: 'http://115.190.202.175/resourcePool/public/1980852435281272833/773ff2a0-28c2-4804-9166-fc39c1c01d16.jpg',
          },
        },
        {
          type: 'text',
          text: `
          根据我给你的提示，将图片中的这些地方，帮我用红色圆圈标记出来,如果你无法在图像上进行修改，那么把标记的坐标返回给我。
          两张图片的主要区别在于标注的字母不同：第一张图中，人物左肩上方标有字母“A”，右肩上方标有字母“C”；第二张图中，人物左肩上方标有字母“G”，而右肩上方的字母“C”被移除。除此之外，人物形象、姿势、服饰和背景均未发生变化。
           
          `,
        },
      ],
    },
  ]

  instance
    .post('', { model: 'qwen3-omni-flash', messages: messages })
    .then((res: any) => {
      console.log(res)
    })
}

// 假设这是你从大模型拿到的 bbox（注意：可能是 [x, y, w, h] 或 [x1, y1, x2, y2]）
// const diffRegion = { x: 48, y: 329, width: 165, height: 441 }
const diffRegion = { x1: 60, y1: 180, x2: 120, y2: 250 }

// 第二张图片的 URL（你上传给模型的那张）
const imageUrl =
  'http://115.190.202.175/resourcePool/public/1980852435281272833/773ff2a0-28c2-4804-9166-fc39c1c01d16.jpg'

// 图片的实际宽度和高度（需要预先知道或者通过 Image 对象 onload 事件获取）
let imgWidth = 0
let imgHeight = 0

const canvasRef = ref(null)

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.crossOrigin = 'anonymous' // 避免 CORS 问题

  img.onload = () => {
    // 更新图片实际宽度和高度
    imgWidth = img.width
    imgHeight = img.height

    // 根据图片大小调整 canvas 尺寸
    adjustCanvasSize(imgWidth, imgHeight)

    // 绘制原图
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

    // 计算并绘制红色矩形框
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 3
    ctx.strokeRect(
      (diffRegion.x1 / imgWidth) * canvas.width,
      (diffRegion.y1 / imgHeight) * canvas.height,
      ((diffRegion.x2 - diffRegion.x1) / imgWidth) * canvas.width,
      ((diffRegion.y2 - diffRegion.y1) / imgHeight) * canvas.height
    )
  }
  img.src = imageUrl
})

// 计算属性，用于动态绑定 canvas 的宽高
const canvasWidth = computed(() => {
  return window.innerWidth - 20 // 假设左右各留出 10px 边距
})
const canvasHeight = computed(() => {
  if (imgHeight === 0 || imgWidth === 0) return 0 // 防止除以零
  return (canvasWidth.value * imgHeight) / imgWidth // 保持宽高比
})

function adjustCanvasSize(width, height) {
  // 如果需要固定的 canvas 尺寸，可以在这里直接设置
  canvasRef.value.width = width
  canvasRef.value.height = height

  console.log(`Canvas size adjusted to ${width}x${height}`)
}
</script>

<style lang="less" scoped></style>
